<template>
  <div class="app-container">
    <el-form :model="ruleForm"  ref="ruleForm" :inline="true">
      <el-form-item  prop="name">
          <el-autocomplete style="width: 500px"
          prefix-icon="el-icon-search"
          class="inline-input"
          v-model="ruleForm.name"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
        ></el-autocomplete>
        <el-button type="primary" style="width: 100px" @click="search">搜索</el-button>
      </el-form-item>

    <el-tabs @tab-click="handleClick" v-model="activeName">
      <el-tab-pane name="web"><span slot="label"><i class="el-icon-orange"></i>  网页</span>
        <el-table
          :data="tableData"
          style="width: 100%" :show-header="false">
          <el-table-column
            prop="title"
            label="标题">
            <template slot-scope="scope">
              <div v-html="showParse(scope.row)"></div>
              <div>作者：<el-avatar shape="square" :size="20"  :src="scope.row.authorImage"></el-avatar>{{scope.row.author}}</div>
              <span v-html="scope.row.description"></span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="消息" name="message"><span slot="label"><i class="el-icon-user"></i> 消息</span>
          <el-table
          :data="tableData"
          style="width: 100%" :show-header="false">
          <el-table-column
            prop="title"
            label="标题">
            <template slot-scope="scope">
              <div v-html="showParse(scope.row)"></div>
              <div>作者：<el-avatar shape="square" :size="20"  :src="scope.row.authorImage"></el-avatar>{{scope.row.author}}</div>
              <span v-html="scope.row.description"></span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="帖子" name="tiezi"><span slot="label"><i class="el-icon-picture-outline"></i>帖子</span>
          <el-table
          :data="tableData"
          style="width: 100%" :show-header="false">
          <el-table-column
            prop="title"
            label="标题">
            <template slot-scope="scope">
              <div v-html="showParse(scope.row)"></div>
              <div>作者：<el-avatar shape="square" :size="20"  :src="scope.row.authorImage"></el-avatar>{{scope.row.author}}</div>
              <span v-html="scope.row.description"></span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="文库" name="wenku"><span slot="label"><i class="el-icon-video-camera"></i>文库</span>
        <el-table
          :data="tableData"
          style="width: 100%" :show-header="false">
          <el-table-column
            prop="title"
            label="标题">
            <template slot-scope="scope">
              <div v-html="showParse(scope.row)"></div>
              <div>作者：<el-avatar shape="square" :size="20"  :src="scope.row.authorImage"></el-avatar>{{scope.row.author}}</div>
              <span v-html="scope.row.description"></span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    </el-form>
    
    

    <el-pagination
      background
    layout="prev, pager, next"
    :total="total"
    :hide-on-single-page="true"
    :current-page="page+1"
      @current-change="currentChange"
      @prev-click="prevClick"
      @next-click="nextClick"
    />
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

import axios from "axios";
export default {
  // components: {
  //   HelloWorld
  // }
  data(){
    return{
      ruleForm:{
        name:""
      },
      page:0,
      size:10,
      total:0,
      restaurants:[],
      tableData:[],
      activeName:"web"
      
    }
    
  },
  created() {
    console.log(this.$route.query);
    this.ruleForm.name = this.$route.query.keyWord
    this.getList();
  },
  methods: {
    handleClick(tab, event){
        console.log(tab, event);
        this.activeName =  tab.name;
        this.currentChange(0);
    },
    currentChange(page){
      this.page = page >0 ? page-1 : page;
      this.getList();
    },
    prevClick(page){
        // if(this.page <= 1){
        //   this.page = 1;
        //   return
        // }

        // this.page = this.page - 1;
        this.page = page-1;
        this.getList();
    },
    nextClick(page){
        this.page = page-1;
        this.getList();
    },
    search(){
      this.page = 0;
      this.size = 10;
      this.activeName = "web";
      this.currentChange(this.page);
    },
    getList(){
      axios.get('http://localhost:8083/es/search?keyWord='+this.ruleForm.name+'&type='+this.activeName+'&page='+this.page+'&size='+this.size)
                .then(response=> {
                    console.log(response);
                  this.tableData = response.data.data;
                  this.total = response.data.count;
                })
                .catch(error=> {
                    console.log(error);

                });
    },
    querySearch(queryString, cb){
      //this.restaurants = [{value:'spring'},{value:'mybatis'}]
      axios.get('http://localhost:8083/es/hot')
                .then(response=> {
                  this.restaurants = response.data
                  cb(this.restaurants);
                })
                .catch(error=> {
                    console.log(error);

                });
      
    },
    showParse(row){
      return '<h3><a href="'+row.url+'" target="_blank">'+row.title+'</a></h3>';
    }
  }
  
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
